初始化

根目錄建立 firebase-config.js 和 firebase.js

// firebase-config.js
export const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxxx",
    projectId: "xxxx",
    storageBucket: "xxxx",
    messagingSenderId: "xxxx",
    appId: "xxxx",
};

// firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { firebaseConfig } from "./firebase-config.js"

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

＊加入 firebase-config.js 加入至 .gitignore 檔案

分頁 & 排序

jobList collection 中所有 doc，按照公司名稱遞增排序，並取得前 25 筆
條件：.collection("jobList").orderBy("companyName", "asc")

import { collection, query, orderBy, limit, getDocs } from "firebase/firestore";
import {db} from '../firebase';

const first = query(collection(db, "jobList"), orderBy("companyName", "asc"), limit(25));
const documentSnapshots = await getDocs(first);
let jobItems = []
documentSnapshots.forEach((doc) => {
  jobItems.push({...doc.data()});
});

查詢

取得地點為台北市信義區的資料

const q = query(collection(db, "jobList"), where("location", "==", "台北市信義區"));

取得地點為台北市中正區且資料來源為 yourator 的資料

const q = query(jobListRef, where("location", "==", "台北市中正區"), where("source", "==", "yourator"));

取得地點為台北市中正區 或 台北市信義區的資料

const q = query(jobListRef, where('location', 'in', [['台北市中正區', '台北市信義區']]));

讀取資料常用 API

DocumentSnapshot ?

用 getDoc(reference) 讀取指定 doc 中的資料，會回傳 DocumentSnapshot Promise 物件。DocumentSnapshot 包含從 document 中讀取的資料，可以使用 .data() 或是 .get(<field>) 讀取整份資料或是特定欄位。
DocumentSnapshot 如果指向一個不存在的 doc，任何資料的取得都會是 undefined，可以使用 exists() 確認 document 是否存在。

// 取得集合 jobList 中 docID 為 xxxx 的 doc 參照
const docRef = doc(db, "jobList", "xxxx");
// 讀取 doc 資料
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
} else {
  // docSnap.data() will be undefined in this case
  console.log("No such document!");
}

QuerySnapshot ?

QuerySnapshot 可以包含 0 到 多個 DocumentSnapshot 物件，可以使用 docs() 或是 forEach 取得資料，透過 empty 和 size 屬性取得 doc 數量。

例如：取得 jobList 所有 doc

import { collection, getDocs } from "firebase/firestore";

const querySnapshot = await getDocs(collection(db, "jobList"));
querySnapshot.forEach((doc) => {
  console.log(doc.id, " => ", doc.data());
});

例如：取得特定條件的所有 doc

import { collection, query, where, getDocs } from "firebase/firestore";

const q = query(collection(db, "jobList"), where("name", "==", "前端工程師"));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  console.log(doc.key, " => ", doc.data());
});

參考資料

Firestore - JavaScript API Reference